<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
  <ScaleScreen class="scale-wrap" :selfAdaption="$store.state.setting.isScale">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 头部 s -->
        <div class="d-flex jc-center title_wrap">
          <!-- 左下拉框 -->
          <!-- <div class="lSe">
            <div class="lContent">
              <el-select v-model="selectValue" placeholder="首页" style="width: 450px; height: 40px"
                @change="handleSelectChange" :popper-append-to-body="false">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div> -->
          <div class="zuojuxing"></div>
          <div class="youjuxing"></div>
          <div class="guang"></div>
          <div class="d-flex jc-center">
            <div class="title">
              <!-- <span class="title-text">粮仓安全智慧预警数据中心</span> -->
            </div>
          </div>
          <!-- <div class="timers">
            {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i>
          </div> -->

          <!-- <div class="lRig">
            <div class="lContent">
              <el-select v-model="selectValueTwo" @change="handleSwitch" placeholder="首页" :popper-append-to-body="false"
                style="width: 450px; height: 40px">
                <el-option v-for="item in optionsTwo" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div> -->
        </div>
        <!-- 头部 e-->
        <!-- 内容  s-->
        <router-view></router-view>
        <!-- 内容 e -->
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
  <!-- </div> -->
</template>

<script>
import { formatTime } from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
// import clearBeforeFun from "@/utils/clearDertail.js";
export default {
  components: { Setting, ScaleScreen },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      options: [{
        value: '1',
        label: '首页'
      }, {
        value: '2',
        label: '数据中心列表'
      }, {
        value: '3',
        label: '数据中心IP段列表'
      }, {
        value: '4',
        label: 'Pop列表'
      }, {
        value: '5',
        label: '重点目标'
      }, {
        value: '6',
        label: '数据中心资产探测数据列表'
      },
      {
        value: '7',
        label: '重点目标资产探测数据列表'
      },
      ],

      optionsTwo: [{
        value: '1',
        label: '微软云层级'
      }, {
        value: '2',
        label: '物理层'
      }, {
        value: '3',
        label: '网络层'
      }, {
        value: '4',
        label: '应用层'
      }, {
        value: '5',
        label: '社会层'
      },
      ],
      selectValue: '',
      selectValueTwo: ''
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() { },
  mounted() {
    // console.log(this.$route, '[[[]]]');
    this.timeFn();
    this.cancelLoading();
    this.selectValue = this.options[0].value
    // localStorage.setItem('currentLevel', 1)
    this.selectValueTwo = this.$route.query.flag ? this.$route.query.flag : "1"
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
    handleSelectChange(value) {
      if (value === '1') {
        this.$router.push({ path: '/index' });
      } else if (value === '2') {
        window.open('/datalist', '_self')
      } else if (value === '3') {
        window.open('/dataIplist', '_self')
      } else if (value === '4') {
        window.open('/poplist', '_self')
      } else if (value === '5') {
        window.open('/emphasisGoal', '_self')
      } else if (value === '6') {
        window.open('/assetlist', '_self')
      } else if (value === '7') {
        window.open('/impGoallist', '_self')
      }
    },
    // 右下拉框触发回调
    handleSwitch(value) {
      // console.log(`output->`,value) 
      // this.$store.state.switch.levelSwitch = value
      this.$store.commit('switch/setlevelSwitch', value)
      this.$store.state.switch.showDetail = false;
      this.$store.state.switch.showDetailTwo = false;
      // 切换时清空之前点击存储到vuex中的详情数据
      // clearBeforeFun.call(this);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";


/* 修改下拉框的背景颜色 */
::v-deep .el-select-dropdown {
  /* 设置深蓝色背景 */
  background-color: #222c3c;
  /* 设置深蓝色边框 */
  border-color: #222c3c;
}

/* 修改下拉框选项的字体颜色 */
::v-deep .el-select-dropdown .el-select-dropdown__item {
  color: #00E6EF;
  /* 设置白色字体 */
}

/* 修改下拉框选中项的背景颜色 */
::v-deep .el-select-dropdown__item.selected {
  background-color: #4a90e2;
  /* 设置选中项的背景色 */
}

/* 修改下拉框选中项的字体颜色 */
::v-deep .el-select-dropdown .el-select-dropdown__item.selected {
  color: #010101;
  /* 设置选中项的字体色 */
}

/* 修改下拉框选中项的字体颜色 */
.el-select-dropdown .el-select-dropdown__item.hover {
  background-color: #7998bb;

}

::v-deep .el-input--suffix .el-input__inner {
  background: #03050c;
  color: #fff;
}
</style>
